<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="__CSS__/api.css" />
    <link rel="stylesheet" type="text/css" href="__CSS__/tt.css" />
    <link rel="stylesheet" type="text/css" href="__CSS__/swiper4.min.css" />
    <style>

        /*头*/

        .swiper-container {
            width: 100%;
            height: 480px;
        }
        .swiper-containerrr {
            width: 100%;
            height: 120px;
        }

        .swiper-slide {
            /*text-align: center;
            font-size: 18px;
            background: #fff;*/
            height: 480px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
        .swiper-slide2 {
            /*text-align: center;
            font-size: 18px;
            background: #fff;*/
            height: 120px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }

        .swiper-slide img {
            width: 100%;
            height: 480px;
        }

        .swiper-button-next,
        .swiper-button-prev {
            position: absolute;
            top: 50%;
            width: 48px;
            height: 72px;
            margin-top: -22px;
            z-index: 10;
            cursor: pointer;
            background-size: 48px 72px;
            background-position: center;
            background-repeat: no-repeat;
        }

        .swiper-button-next {
            background-image: url(__IMG__/prev2.png);
            right: 108px;
            left: auto;
        }
        .swiper-button-next2 {
            background-image:url(__IMG__/right_arrow.png);
            background-size: 40px 40px;
            right: 0;
        }

        .swiper-button-prev {
            background-image: url(__IMG__/prev1.png);
            left: 108px;
            right: auto;
        }
        .swiper-button-prev2 {
            background-image:url(__IMG__/left_arrow.png);
            background-size: 40px 40px;
            left: 0;
        }

        .box {
            width: 1180px;
            margin: 0 auto;
        }

        .tit {
            font-size: 22px;
            font-weight: 600;
            color: rgba(51, 51, 51, 1);
            padding-top: 40px;
            padding-bottom: 16px;
        }

        .card1 {
            width: 1180px;
            height: 450px;
            background: rgba(255, 255, 255, 1);
        }

        .card2 {
            width: 578px;
            height: 325px;
            margin-right: 20px;
            margin-bottom: 215px;
        }

        .card3 {
            width: 578px;
            height: 325px;
            background: rgba(255, 255, 255, 1);
            margin-bottom: 215px;
        }

        #order,
        #about,
        #user {
            display: none;
        }
        .pro_type1{
            width:75px;height: 120px;margin-top: 10px;float: left;
            /*border: 1px solid red;*/
        }
        .pro_type2{
            width:100px;height: 120px;margin: 10px 45px 10px 0;float: left;
            /*border: 1px solid red;*/
        }
        .pro_type1 .pp1_1{
            font-size: 18px;line-height: 60px;text-align: center;
            font-weight: bold;letter-spacing: 1px;cursor: pointer;
        }
        .pro_type1 .pp1_2{
            font-size: 14px;line-height: 30px;text-align: center;
            color: gray;
        }
        .pro_type1 .pp1_3{
            font-size: 22px;line-height: 30px;text-align: center;
        }
        .pro_type2 .pp2_1{
            height: 40px;
        }
        .pro_type2 .pp2_2{
            height:80px;width:100px;"
        }
        .active_no{
            color: gray;
        }
        .active_blue{
            color: #59ADFE;
        }
        .active_black{
            color: #000;
        }
    </style>
</head>

<body>
{include file="public/header"}
<div class="swiper-container">
    <div class="swiper-wrapper">
        {volist name='banner' id='b'}
        <div class="swiper-slide" onclick="bannerGo({$b.banner_id},{$b.banner_type},{$b.banner_link});">
            <img src="{$b.banner_thumb}" alt="" style="cursor: pointer;">
        </div>
        {/volist}
    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>
<div class="box">
    <div class="tit">实时物流订单展示</div>
    <!---->
        <div class="swiper-container swiper-containerrr" id="swiper2" style="background-color: #FFF">

            <div class="swiper-wrapper">
                {volist name='areas' id='a'}
                <div class="swiper-slide swiper-slide2">
                    <div class="pro_type1" data-type="{$liang[$key]}">
                        <p class="mwwblue_{$key} pp1_1  {if $key == 0}active_blue{else/}active_no{/if}" onclick="bottomUnder('{$a}',{$key});">{$a}</p>
                        <p class="pp1_2">运单量</p>
                        <p class="mwwblack_{$key} pp1_3  {if $key == 0}active_black{else/}active_no{/if}">
                            {if $key == 0}
                            100%
                            {else /}
                                {if $liang[0] == 0}
                                0%
                                {else /}
                                {$liang[$key]*100/$liang[0]|round}%
                                {/if}
                            {/if}
                        </p>
                    </div>
                    <div class="pro_type2">
                        <div class="pp2_1"></div>
                        <div class="pp2_2" id="main8{$key}"></div>
                    </div>
                </div>
                {/volist}
            </div>

            <div class="swiper-button-prev swiper-button-prev2"></div><!--左箭头-->
            <div class="swiper-button-next swiper-button-next2"></div><!--右箭头-->
        </div>
    <!---->
    <div class="card1" id="mainpie"></div>
    <div style="width:100%;height: 160px;clear: both;background-color: #FFF;"></div>
    <div class="flex-wrap">
        <div>
            <div class="tit">小易嘀达覆盖地区</div>
            <div class="card2" id="main"></div>
        </div>
        <div>
            <div class="tit">小易嘀达运力展示</div>
            <div class="card3" id="main1"></div>
        </div>
    </div>
</div>

</body>
<script type="text/javascript" src="__SCRIPT__/swiper4.min.js"></script>
<script type="text/javascript" src="__SCRIPT__/xydd.js"></script>
<script src="__SCRIPT__/echarts.min.js" ></script>
<script src="__SCRIPT__/bmap.js" ></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=GZSILhN6GDZpDkdku64uWWnGTgTBQmzX"></script>
<script src="/static/admin/js/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        ajaxList();
        one();
        bottomUnder('全部','0');
        var six_all = 0;
        $('.pro_type1').each(function (i,d) {
           if(i == 0){
               six_all = $(d).attr('data-type');
               six('main80',100,0,'','','#01A1FF');
           } else{
               var now_ll = $(d).attr('data-type');
               six('main8'+i,now_ll,six_all - now_ll,'','','#01A1FF');
           }
        });
    });

    function ajaxList() {
        var myChart = echarts.init(document.getElementById('main'));
        var data = {$data};
        var geoCoordMap = {$data2};

        var convertData = function (data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var geoCoord = geoCoordMap[data[i].name];
                if (geoCoord) {
                    res.push({
                        name: data[i].name,
                        value: geoCoord.concat(data[i].value)
                    });
                }
            }
            return res;
        };

        var option = {
            title: {
                text: '',
                subtext: '',
                sublink: '',
                left: 'center'
            },
            tooltip : {
                trigger: 'item'
            },
            bmap: {
                center: [104.114129, 37.550339],
                zoom: 5,
                roam: true,
                mapStyle: {
                    styleJson: [{
                        'featureType': 'water',
                        'elementType': 'all',
                        'stylers': {
                            'color': '#d1d1d1'
                        }
                    }, {
                        'featureType': 'land',
                        'elementType': 'all',
                        'stylers': {
                            'color': '#f3f3f3'
                        }
                    }, {
                        'featureType': 'railway',
                        'elementType': 'all',
                        'stylers': {
                            'visibility': 'off'
                        }
                    }, {
                        'featureType': 'highway',
                        'elementType': 'all',
                        'stylers': {
                            'color': '#fdfdfd'
                        }
                    }, {
                        'featureType': 'highway',
                        'elementType': 'labels',
                        'stylers': {
                            'visibility': 'off'
                        }
                    }, {
                        'featureType': 'arterial',
                        'elementType': 'geometry',
                        'stylers': {
                            'color': '#fefefe'
                        }
                    }, {
                        'featureType': 'arterial',
                        'elementType': 'geometry.fill',
                        'stylers': {
                            'color': '#fefefe'
                        }
                    }, {
                        'featureType': 'poi',
                        'elementType': 'all',
                        'stylers': {
                            'visibility': 'off'
                        }
                    }, {
                        'featureType': 'green',
                        'elementType': 'all',
                        'stylers': {
                            'visibility': 'off'
                        }
                    }, {
                        'featureType': 'subway',
                        'elementType': 'all',
                        'stylers': {
                            'visibility': 'off'
                        }
                    }, {
                        'featureType': 'manmade',
                        'elementType': 'all',
                        'stylers': {
                            'color': '#d1d1d1'
                        }
                    }, {
                        'featureType': 'local',
                        'elementType': 'all',
                        'stylers': {
                            'color': '#d1d1d1'
                        }
                    }, {
                        'featureType': 'arterial',
                        'elementType': 'labels',
                        'stylers': {
                            'visibility': 'off'
                        }
                    }, {
                        'featureType': 'boundary',
                        'elementType': 'all',
                        'stylers': {
                            'color': '#fefefe'
                        }
                    }, {
                        'featureType': 'building',
                        'elementType': 'all',
                        'stylers': {
                            'color': '#d1d1d1'
                        }
                    }, {
                        'featureType': 'label',
                        'elementType': 'labels.text.fill',
                        'stylers': {
                            'color': '#999999'
                        }
                    }]
                }
            },
            series : [
                {
                    name: 'pm2.5',
                    type: 'scatter',
                    coordinateSystem: 'bmap',
                    data: convertData(data),
                    symbolSize: function (val) {
                        return val[2] / 10;
                    },
                    label: {
                        normal: {
                            formatter: '{b}',
                            position: 'right',
                            show: false
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'purple'
                        }
                    }
                },
                {
                    name: 'Top 5',
                    type: 'effectScatter',
                    coordinateSystem: 'bmap',
                    data: convertData(data.sort(function (a, b) {
                        return b.value - a.value;
                    }).slice(0, 6)),
                    symbolSize: function (val) {
                        return val[2] / 10;
                    },
                    showEffectOn: 'render',
                    rippleEffect: {
                        brushType: 'stroke'
                    },
                    hoverAnimation: true,
                    label: {
                        normal: {
                            formatter: '{b}',
                            position: 'right',
                            show: true
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'purple',
                            shadowBlur: 10,
                            shadowColor: '#333'
                        }
                    },
                    zlevel: 1
                }
            ]
        };
        myChart.setOption(option);
    }
    function one() {
        var myChart = echarts.init(document.getElementById('main1'));
        var namename = {$name} . toString();
        var valuevalue = {$value} . toString();
        var name_arr = namename.split(',');
        var value_arr = valuevalue.split(',');

        var option = {
            color: ['#3398DB'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '1%',
                top: '5%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: name_arr,
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '数量',
                    type: 'bar',
                    barWidth: '20%',
                    data: value_arr,
                    itemStyle: {
                        normal: {
                            color: function (params) { // 给出颜色组
                                var colors = {$colors} . toString();
                                var colorList = colors.split(',');
                                return colorList[params.dataIndex]
                            }
                        }
                    }
                }
            ]
        };
        myChart.setOption(option);
    }
    function bottomUnder(quyu,ii) {
        $('.pp1_1').addClass('active_no');
        $('.pp1_3').addClass('active_no');
        $('.pp1_1').removeClass('active_blue');
        $('.pp1_3').removeClass('active_black');
        $('.mwwblue_'+ii).addClass('active_blue');
        $('.mwwblack_'+ii).addClass('active_black');
        $.ajax({
            url: "{:url('getWuliuTypes')}",
            data:'quyu=' + quyu,
            type: "post",
            dataType: "json",
            success: function (res) {
                columnPie(res.msg.date,'mainpie','',res.msg.value);
            }
        });
    }
    function columnPie(dataX,id,name,dataY) {
        var myChart = echarts.init(document.getElementById(id));
        var option = {
            grid: {
                left: '5%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            dataZoom: [
                {
                    show: true,
                },
                {
                    type: 'inside',
                },
                {
                    show: true,
                    yAxisIndex: 0,
                    filterMode: 'empty',
                    width: 1,
                    height: '80%',
                    showDataShadow: false,
                    left: '98%'
                }
            ],
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: dataX
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name:name,
                    type:'line',
                    stack: '总量',
                    data:dataY,
                    lineStyle: { normal: { color: '#59ADFE' ,width: 2 } },
                    itemStyle: { normal: { color: '#59ADFE' , borderWidth: 5 } },
                }
            ]
        };
        myChart.setOption(option);

    }
    function six(div,up,down,up_str,down_str,color) {
        if(up == 0){
            color = '#F2F2F4';
        }
        var myChart = echarts.init(document.getElementById(div));
        var option = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            series: [
                {
                    name: '运单量',
                    type: 'pie',
                    radius: ['80%', '90%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: false,
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        {value: up, name: up_str},
                        {value: down, name: down_str}
                    ],
                    itemStyle: {
                        normal: {
                            color: function (params) { // 给出颜色组
                                var colorList = [color, '#F2F2F4'];
                                return colorList[params.dataIndex]
                            }
                        }
                    }
                }
            ]
        };
        myChart.setOption(option);
    }
</script>
<script type="text/javascript">
    var swiper = new Swiper('.swiper-container', {
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });
    var mySwiper2 = new Swiper ('#swiper2', {
        direction: 'horizontal', // 垂直切换选项
        loop: false, // 循环模式选项
        // autoplay:true,//等同于以下设置
        slidesPerView : 4,
        navigation: {
            nextEl: '.swiper-button-next2',
            prevEl: '.swiper-button-prev2',
        },
    })
    function bannerGo(id,type,link) {
        if(type == 1){
            location.href = link;
        }else{
            location.href = '{:url("First/banner_detail")}?id='+id;
        }
    }
</script>

</html>
